<template>
  <div class="SDbaseContainer">
    <control></control>
    <!-- <div class="right">
      <div class="drawing-main h-full">
        <div class="drawing-main__title">绘画任务</div>

        <div class="p-[10px]" style="height: calc(100% - 180px)">
          <div class="task-lists flex-1">
            <div
              v-for="(item, index) in taskLists"
              :key="index"
              class="task-item"
              :class="{
                'task-item--active': item.value === taskIndex,
              }"
              @click="taskIndex = item.value"
            >
              {{ item.name }}
            </div>
          </div>

          <div
            class="h-full"
            v-loading="isReceiving"
            element-loading-text="请求生成中"
          >
            <DrawingTabs
              v-for="tabs in taskLists"
              :key="tabs.value"
              :status="taskIndex"
              :lazy="taskIndex == tabs.value"
              @pagination="setTaskRecordFunc"
            >
              <template #item="{ item }">
                <DrawingResult :value="item" :status="item?.status" />
              </template>
            </DrawingTabs>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import Control from "./control/index.vue";
import { useIndexEffect } from "./hooks/useIndexEffect";
const { taskLists, taskIndex, isReceiving, setTaskRecordFunc } =
  useIndexEffect();
</script>
<style lang="scss" scoped>
.SDbaseContainer {
    display: flex;
    width: 100%;

    .right {
        flex: 1;

        .drawing-main {
            border-radius: 12px;
            background: #262932;

            &__title {
                font-size: 18px;
                font-weight: 500;
                color: #ffffff;
                padding: 20px 0;
                margin: 0 20px;
                border-bottom: 1px solid #e5e5ea;
            }

            .task-lists {
                .task-item {
                    display: inline-block !important;
                    line-height: 30px;
                    border-radius: 30px;
                    //box-shadow: 0 2px 6px #ebeefd;
                    text-align: center;
                    height: 30px;
                    padding: 0px 24px;
                    font-size: 14px;
                    margin: 10px 0;
                    margin-left: 10px;
                    cursor: pointer;
                    @apply line-clamp-1 text-tx-primary;

                    &--active {
                        @apply text-btn-text;
                        //box-shadow: 0 3px 6px #ebeefd;
                        background: linear-gradient(87.73deg,
                                var(--gradient-1) 0%,
                                var(--gradient-2) 100%);
                    }
                }
        }
        }
    }

    :deep(.el-dialog) {
        background: #262932;
    }
}
</style>
